import React from 'react';
import { createForm } from 'rc-form';
import { ToastTips } from '../../../../../../../common/toastTips/tosat';
import styles from './putLoginPassword.css';
import CustBtn from '../../../../../../../common/buttons/Btn';

const PutLoginPassword = ({
  onSubmit=()=>{},
  form: { getFieldProps, getFieldsValue, validateFields },
}) => {

  const btnProps = {
    textValue:'提交',
    onOk(){
      validData();
    },
  }

  const validData = () => {
    validateFields((error, value) => {
      // console.log(error, value);
      if ( !value.oldPassword) {
        ToastTips('旧输入新密码', 1500, null)
      } else if ( value.oldPassword.length < 6) {
        ToastTips('旧密码不能少于6位', 1500, null)
      } else if ( !value.newPassword) {
        ToastTips('请输入新密码', 1500, null)
      } else if ( value.newPassword.length < 6) {
        ToastTips('新密码不能少于6位', 1500, null)
      } else if ( !value.newPassword2) {
        ToastTips('请输入确认新密码', 1500, null)
      } else if ( value.newPassword2.length < 6 ) {
        ToastTips('确认新密码不能少于6位', 1500, null)
      } else if ( value.newPassword != value.newPassword2 ) {
        ToastTips('两次输入的新密码不一致', 1500, null)
      } else {
        onSubmit(value.oldPassword, value.newPassword)
      }

    });
  }

  const Seperator = () => <div style={{marginBottom: '1em'}}></div>;

  return (
    <div className={styles.content}>

      <div className={styles.contentBody}>
        <input type="password"
            {...getFieldProps('oldPassword',{
              rules: [
                { required: false, message: '旧密码不能为空' }
              ]
            })}
            placeholder="请输入旧登录密码"
            maxLength='16'
            className={styles.inputStyle}
          />
        <Seperator/>
        <input type="password"
            {...getFieldProps('newPassword',{
              rules: [
                { required: false, message: '新密码不能为空' }
              ]
            })}
            placeholder="请输入新密码"
            maxLength='16'
            className={styles.inputStyle}
          />
        <Seperator/>
        <input type="password"
            {...getFieldProps('newPassword2',{
              rules: [
                { required: false, message: '确认密码不能为空' }
              ]
            })}
            placeholder="请再次输入新密码"
            maxLength='16'
            className={styles.inputStyle}
          />
        <Seperator/>
        <div className={styles.btn}>
          <CustBtn {...btnProps}/>
        </div>
      </div>
    </div>
  );
};

PutLoginPassword.propTypes = {
};

export default createForm()(PutLoginPassword);
